<%--
  Created by IntelliJ IDEA.
  User: 杨璞
  Date: 2017/12/7
  Time: 13:36
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@taglib prefix="mvc" uri="http://www.springframework.org/tags/form" %>
<%@taglib prefix="fmt" uri="http://www.springframework.org/tags" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<%--<%@ page contentType="text/html;charset=UTF-8" language="java" %>--%>
<html>
<head>
    <title><fmt:message code="main.workdestroy"/></title>
    <meta charset="UTF-8">
    <%--<meta http-equiv="Content-Type" content="text/html; charset=utf-8 ? MYOA_CHARSET : htmlspecialchars($HTML_PAGE_CHARSET))?>" />--%>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <%--<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">--%>
    <link rel="stylesheet" type="text/css" href="../../css/workflow/m_reset.css">
    <link rel="stylesheet" type="text/css" href="../../css/workflow/work/workMonitor.css">
    <link rel="stylesheet" href="../../css/officialDocument/officialDocument.css">
    <link rel="stylesheet" type="text/css" href="../../lib/pagination/style/pagination.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/base.css" />
    <link rel="stylesheet" type="text/css" href="/css/base/base.css?20201106.1" />
    <link rel="stylesheet" href="/lib/layer/skin/default/layer.css">
    <link rel="stylesheet" type="text/css" href="../../css/workflow/work/handle.css"/>
    <%--<link rel="stylesheet" type="text/css" href="../../css/workflow/work/bootstrap.css">--%>
    <script>

        function getCookie(name)
        {
            var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
            if(arr=document.cookie.match(reg))
                return unescape(arr[2]);
            else
                return null;
        }

        var oHead = document.getElementsByTagName('HEAD').item(0);

        var oScript= document.createElement("script");
        var type = getCookie("language");
        oScript.type = "text/javascript";

        if(type){
            oScript.src="/js/Internationalization/"+type+".js";
        }else{
            oScript.src="/js/Internationalization/zh_CN.js";
        }
        oHead.appendChild( oScript);

    </script>
    <script type="text/javascript" src="/js/jquery/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="/js/base/tablePage.js"></script>
    <script src="/lib/layer/layer.js?20201106"></script>
    <script src="/js/base/base.js"></script>
    <script src="../../lib/laydate/laydate.js"></script>
    <script src="../../js/workflow/work/workform.js"></script>
    <script src="/js/workflow/work/workDestruction.js"></script>
    <script src="../../lib/pagination/js/jquery.pagination.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../js/jquery/jquery.cookie.js"></script>

    <style>
        input{
            float:none;
            border:1px solid #ccc;
        }
        .workMon {
            font-size: 22px;
            font-weight: normal;
            line-height: 45px;
            float: none;
            margin-top: 9px;
            font-size: 22px;
            color: #333;
        }
        .flowNum, .artNum, #user,#startTime,#endTime {
            width: 100px;
            border-radius: 3px;
            height: 28px;
        }


        .sms-bg-static{
            background: #d2d2d2 url("/img/images/sms-static.png") no-repeat left center;
        }
        .sms-bg-static.active{
            background: #3691da url(/img/images/sms.png) no-repeat left center;
        }
        .email-bg-static{
            background: #d2d2d2 url(/img/images/email-static.png) no-repeat left center;
        }
        .email-bg-static.active{
            background: #3691da url(/img/images/email.png) no-repeat left center;
        }
        .sms-check, .email-check, .mobile-check{
            width: 88px;
            height: 30px;
        }
        .userSelectBtn:hover {
            background: url(../../img/userSelectBtnhover.png) no-repeat -3px -2px;
        }
        .layui-layer-btn-{
            /*border-top: 1px solid #d6d6d6;*/
            /*background-color: #f6f6f6;*/
        }
        .prcsName h1 {
            text-align: center;
            line-height: 35px;
        }
        .layui-layer-page .layui-layer-content {
            overflow-x: hidden !important;
        }
        .layui-layer-title{
            color: #fff;
            font-size: 16px;
            font-family: Microsoft yahei,Helvetica Neue,Helvetica,PingFang SC,Tahoma,Arial,sans-serif;
            background:linear-gradient(to bottom,#2077c6,#2495df);
            FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0, startColorStr=#2077c6, endColorStr=#2495df);
            background: -ms-linear-gradient(top, #2077c6, #2495df);        /* IE 10 */
            background:-moz-linear-gradient(top, #2077c6, #2495df);/*火狐*/
            background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#2077c6), to(#2495df));  /* Safari 4-5, Chrome 1-9*/
            background: -webkit-linear-gradient(top, #2077c6, #2495df);   /*Safari5.1 Chrome 10+*/
            background: -o-linear-gradient(top, #2077c6, #2495df);  /*Opera 11.10+*/
        linear-gradient(to bottom, hsl(0, 80%, 70%), #2077c6); /* Standard syntax; must be last */
        }
        .xuanzhong1{
            left: 193px;
        }
        .work-prcs-title,.work-msg-title{
            background-color: #d6e7f8;
            color: #023964;
            font-size: 14px;
            position: relative;
        }
        .prcsName_chang{
            border: none;
            color:#fff;
            background: #3691da  url("../../../img/workflow/work/add_work/checked.png") no-repeat 20px center;
        }
        .user-tags{
            background: #fff;
        }
        .cytitle{
            position: absolute;
            left: 140px;
            font-size: 14px;
            color: #023964;
            top: 30px;
        }
        .feedbacktitle {
            position: relative;
            top: 3px;
            font-weight: bold;
            margin-left: 10px;
            color: #333333;
        }
        .feedbackcontent {
            margin-left: 23px;
            font-size: 15px;
            color: #333333;
        }
        .backinfo {
            width: 100%;
            height: 100px;
        }
        #destory, #reset {
            background: #00a0e9 !important;
            border-radius: 4px;
            color: #fff !important;
            padding: 6px 7px;
            margin: 5px 5px;
            cursor:pointer;
        }

        .sel{
            width:158px;
            max-height:250px;
            position: absolute;
            top:21px;
            left:64px;
            overflow: auto;
            background: #fff;
            border:1px solid #e2e3e3;
            display: none;
        }
        .sel li{
            line-height: 24px;
            color: #000;
        }
        #list{
            width:40px;
            height:30px;
            background: #f3f3f3;
            border:1px solid #ccc;
            vertical-align: middle;
            position: absolute;
            right: 0px;
            top: -8px;
            border-radius: 0px 3px 3px 0px;
        }
        #list img{
            margin-top: -2px;
            margin-left: 0px;
        }
        .canchoose:hover{
            background: #2b7edf;
            color: #fff;
        }
        input[name="flowName"]{
            width:150px;
            height:28px;
            border-radius: 3px;
            margin-top: -6px;
        }

        .checks{
            background-color:transparent; !important;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="/css/commonTheme/${sessionScope.InterfaceModel}/commonTheme.css?20191219.2"/>
</head>
<body>
<div class="mainCon">
    <div class="header" style="background-color:white ">
        <div class="title">
            <img src="/img/commonTheme/${sessionScope.InterfaceModel}/gongzuojiankong.png" alt="" style="margin-bottom:10px;">
            <h3 style="display:inline;" class="workMon"><fmt:message code="main.workdestroy"/></h3>
        </div>
    </div>
    <div class="section">
        <div class="selectNav" style="padding-top: 63px;padding-bottom: 13px">
            <label style="position: relative"><fmt:message code="workflow.th.processname"/>：
                <input type="text" name="flowName" placeholder="全部流程" dataType="" style="width: 150px;padding-left: 5px">
                <button id="list"><img src="../../img/workflow/work/xiala.png" alt=""></button>
                <ul class="sel"></ul>
            </label>
            <%--<select name="flowId" id="flowName" style="width: 130px;">--%>
                <%--&lt;%&ndash;<option value=""><fmt:message code="workflow.th.wholeprocess"/></option>&ndash;%&gt;--%>
            <%--</select>--%>
            <label style="margin-left: 10px"><fmt:message code="workflow.th.liushui"/>：</label>
            <input type="text" class="flowNum" name="runId">
            <label style="margin-left: 10px"><fmt:message code="workflow.th.job"/>：</label>
            <input type="text" class="artNum" name="runName" value="">

        </div>
        <div style="margin-bottom: 15px;">
            <label style="margin-left: 20px"><fmt:message code="adding.th.launch"/>：</label>
            <input type="text" id="startTime" onclick="laydate({istime: true, format: 'YYYY-MM-DD'})">
            <span>&nbsp;&nbsp;&nbsp;<fmt:message code="global.lang.to"/>&nbsp;&nbsp;&nbsp;</span>
            <input type="text" id="endTime" onclick="laydate({istime: true, format: 'YYYY-MM-DD'})">
            <label style="margin-left: 20px"><fmt:message code="workflow.th.ProcessInitiator"/>：</label>

            <input type="text" id="user" name="userId" user_id="" readonly>
            <a href="javascript:;" id="addUser" style="margin-left: 10px;color: #2b7fe0;"><fmt:message code="notice.th.chose"/></a>
            <a href="javascript:;" id="clearUser" style="color: #2b7fe0;margin-left: 5px;"><fmt:message code="global.lang.empty"/></a>
            <button id="query" style="margin-top: 5px;margin-left: 13px">
                <img src="../../img/workflow/worksearch1.png" style="margin-right: 2px;margin-left:5px;margin-bottom: 1px;">
                <span style="margin-right: 5px;"><fmt:message code="global.lang.query"/></span>
            </button>
            <button id="destory" dataType="0" style="margin-top:5px">
                <img src="../../img/mywork/deletework2.png" style="margin-right: 2px;margin-left: 5px;margin-bottom: 1px;">
                <span style="margin-right: 0px;"><fmt:message code="AllDestruction"/></span>
            </button>
            <button id="reset" dataType="0" style="margin-top: 5px">
                <img src="../../img/workflow/workdc.png" style="width: 14px;margin-right: 2px;margin-left:5px;margin-bottom: 1px;">
                <span style="margin-right: 0px;"><fmt:message code="restoreAll"/></span>
            </button>
        </div>
    </div>

    <div id="pagediv">

    </div>
</div>
</body>
</html>
<script>
    var eventas;
    window.onresize = function(){
        var screenwidth = document.documentElement.clientWidth;
        if (screenwidth  > 1135) {
            var nums = screenwidth * 0.97;
            var sumwidth = screenwidth * 0.97 + 'px';
        } else {
            var nums = 1100;
            var sumwidth = '1100px';
        }
        pageObj.configuration[0]['width'] = nums * 0.025 + 'px';
        pageObj.configuration[1]['width'] = nums * 0.073 + 'px';
        pageObj.configuration[2]['width'] = nums * 0.221 + 'px';
        pageObj.configuration[3]['width'] = nums * 0.121 + 'px';
        pageObj.configuration[4]['width'] = nums * 0.23 + 'px';
        pageObj.configuration[5]['width'] = nums * 0.15 + 'px';
        $('.page-top-outer-layer').css('width',sumwidth).find('table').css('width',sumwidth);
        for(var i=0;i< $('.page-top-outer-layer').find('th').length;i++){
            $('.page-top-outer-layer').find('th').eq(i).css('width',pageObj.configuration[i]['width']);
        }
        $('.page-bottom-outer-layer').css('width',sumwidth).find('.page-bottom-inner-layer').css('width',sumwidth).find('table').css('width',sumwidth);
        var table = $('.page-bottom-outer-layer .page-bottom-inner-layer table');
        for(var i=0;i<table.find('tr').length;i++){
            for(var j=0;j<table.find('tr').eq(i).find('td').length;j++){
                table.find('tr').eq(i).find('td').eq(j).css('width',pageObj.configuration[j]['width']);
            }
        }
    };
    var screenwidth = document.documentElement.clientWidth;
    if (screenwidth  > 1135) {
        var nums = screenwidth * 0.97;
        var sumwidth = screenwidth * 0.97 + 'px';
    } else {
        var nums = 1100;
        var sumwidth = '1100px';
    }
    var width0 = nums * 0.025 + 'px';
    var width1 = nums * 0.073 + 'px';
    var width2 = nums * 0.221 + 'px';
    var width3 = nums * 0.121 + 'px';
    var width4 = nums * 0.23 + 'px';
    var width5 = nums * 0.15 + 'px';

    var pageObj=$.tablePage('#pagediv',sumwidth,[
        {
            width:width0,
            title:'',
            name:'checkbox',
            selectFun:function (runId,obj) {
                return '<input type="checkbox" id="'+obj.runId+'" name="checkbox" class="checks" runId="'+obj.runId+'" style="background-color: transparent"/>';
            }
        },
        {
            width:width1,
            title:'<fmt:message code="workflow.th.liushui"/>',
            name:'runId'
        },
        {
            width:width2,
            title:'<fmt:message code="workflow.th.job"/>',
            name:'runName',
            selectFun:function (flowName,obj) {
                return '<a class="wenhao" style="cursor: pointer;" tableName="'+obj.sortMainType+'" onclick="jumpOpenType(this,'+obj.flowId+','+obj.runId+')">'+flowName+'</a>';
            }
        },
        {
            width:width3,
            title:'<fmt:message code="DeletingTime"/>',
            name:'delTime'
        },
        {
            width:width4,
            title:'<fmt:message code="workflow.th.PublicAccessories"/>',
            name:'attachmentName',
            selectFun:function (attachmentName,obj) {
                if(attachmentName==''){
                    return ''
                }else {
                    var str = '';
                    for(var i=0;i<obj.attachments.length;i++){
                        var attUrl = obj.attachments[i].attUrl;
                        str += '<div title="'+obj.attachments[i].attachFile+'"><a href="javascript:;" style="display: block;text-overflow: ellipsis;\n' +
                            '    overflow: hidden;\n' +
                            '    white-space: pre;">'+obj.attachments[i].attachFile+'</a>'+
                            '<a href="javascript:;" style="margin-right: 5px;" class="yulan" data-url="'+attUrl+'"><fmt:message code="global.lang.view"/></a>' +
                            '<a href="/download?'+attUrl+'" ><fmt:message code="file.th.download"/></a></div>'
                    }
                    return str;
                }
            }
        },
         {
             width:width5,
                 title:'<fmt:message code="notice.th.operation"/>',
         }
    ],function (me){
        me.data.pageSize = 15;
        me.init('../../workflow/work/workDestroy/query',[

            {name:'<fmt:message code="workflow.th.chart"/>',fn:function(obj){
                return 1;
            }}, {name:'<fmt:message code="dem.th.Destroy"/>',fn:function(obj){
                return 1;
            }},{name:'<fmt:message code="dem.th.reduction"/>',fn:function(obj){
                return 1;
            }}])
    })

    $(document).click(function(){
        $('.sel').hide()
    })

    $('#list').click(function(e){
        e.stopPropagation()
        if( $('.sel').css('display')!='none'){
            $('.sel').hide()
        }else{
            $('.sel').show()
        }

    })
    $('[name="flowName"]').keyup(function(){
        $('.sel').show()
        var val=$(this).val()
        $('.sel li').each(function(i,v){
            if(v.innerHTML.indexOf(val)>-1){
                $(v).show();
                $(v).parent().show()
            }else{
                $(v).hide();
            }
        })

    })

    $('.sel').on('click','li',function(e){
        e.stopPropagation()
        if($(this).attr('value')){
            $('[name="flowName"]').val($(this).html())
            $('[name="flowName"]').attr('dataType',$(this).attr('value'))
            $('.sel').hide()
        }else{
            $('.sel').show()
        }
    })

    function buildNode(len,data){
        var prefix = 10;
        for(var i=0;i<len;i++){
            prefix += 10;
        }

        $.each(data,function(i,item){
            if(0 < item.childs.length){
                $('.sel').append("<li style='padding-left:"+(prefix)+"px;font-weight:bold;font-size:14px;' id="+item.sortId +">" + item.sortName + "<li>");
                $.each(item.flowTypeModels,function(j,v){
                    $('.sel').append("<li style='padding-left:"+(prefix+10)+"px;cursor:pointer' class='canchoose' value="+v.flowId +">" +  v.flowName + "<li>");
                })
                buildNode(len+1,item.childs);
            }else{
                $('.sel').append("<li style='padding-left:"+(prefix)+"px;font-weight:bold;font-size:14px;' id="+item.sortId +">" + item.sortName + "<li>");
                $.each(item.flowTypeModels,function(j,v){
                    $('.sel').append("<li style='padding-left:"+(prefix+10)+"px;cursor:pointer' class='canchoose' value="+v.flowId +">" +  v.flowName + "<li>");
                })
            }
        });
    }

    $(function(){
        $.ajax({
            url:"/flow/selOneToAllType",
            type:'post',
            dataType:'json',
            success:function(res){
                var data=res.datas;
                var str='<option value=""><fmt:message code="hr.th.PleaseSelect"/></option>';
                if(res.flag){
                    $.each(data,function(i,item){
                        $('.sel').append("<li class='ones' style='font-weight:bold;font-size:14px;' id="+item.sortId +"><img src='../../img/data_points.png' style='margin-right: 5px;    margin-top: 0px;' alt=''>" + item.sortName + "<li>");
                        $.each(item.flowTypeModels,function(j,v){
                            $('.sel').append("<li style='padding-left:10px;cursor:pointer' class='canchoose' value="+v.flowId +">" +v.flowName + "<li>");
                        })
                        buildNode(1,item.childs);
                    });
                }
            }
        })
    })

    $(document).on('click','.yulan',function () {
        var url=$(this).attr('data-url');
        $.pdurl($.UrlGetRequest('?'+url),url);
    })
</script>